<template>
	<view class="home">
		<u-navbar title="我的" bgColor="unset" leftIconSize="0"></u-navbar>
		<view class="user u-m-b-60">
			<view class="u-flex-y-center ">
				<u-image class="u-m-r-20" :src="prefixURL(userInfo.avatar)" shape="circle" width="120rpx"
					height="120rpx"></u-image>
				<u-text :text="userInfo.nickname" color="#333"></u-text>
			</view>
		</view>
		<view class="menu">
			<up-cell-group :border="false">
				<up-cell title="修改密码" @click="handleRoute('/pages/mine/editPassword')" :clickable="false" isLink></up-cell>
				<up-cell title="清除缓存" @click="handleDialog('cache')" :clickable="false" isLink
					:value="`${data.currentSize}M`"></up-cell>
				<up-cell title="版本更新" @click="handleDialog('version')" :clickable="false" isLink
					:value="`V${userConfig.version||''}`"></up-cell>
				<up-cell title="用户协议" @click="handleRoute(`/pages/mine/agreement?title=用户协议`)" :clickable="false"
					isLink></up-cell>
				<up-cell @click="handleRoute(`/pages/mine/agreement?title=隐私政策`)" :border="false" :clickable="false" isLink
					title="隐私政策"></up-cell>
			</up-cell-group>
		</view>
		<u-button type="primary" color="#0C9BF4" customStyle="width:372rpx;height:88rpx;fontSize:28rpx;marginTop:180rpx"
			@click="loginOut">退出登录</u-button>
		<u-modal contentTextAlign="center" :show="data.show" :content="data.content" showCancelButton
			@cancel="data.show = false" @confirm="handleConfirm"></u-modal>
	</view>
	<up-tabbar :value="'mine'" activeColor="#0C9BF4" inactiveColor="#BFBFBF">
		<up-tabbar-item text="首页" icon="/static/images/icon_gd.png" @click="handleClick('/pages/index/index')"></up-tabbar-item>
		<up-tabbar-item text="记账" icon="/static/images/icon_bill.png" @click="handleClick('/pages/bill/bill')"></up-tabbar-item>
		<up-tabbar-item text="统计" v-if="userInfo.group_id == 1" icon="/static/images/icon_tj.png" @click="handleClick('/pages/statistics/statistics')"></up-tabbar-item>
		<up-tabbar-item text="我的" name="mine" icon="/static/images/icon_wd_y.png" ></up-tabbar-item>
	</up-tabbar>
</template>
<script setup lang="ts">
	import { ref, computed } from "vue";
	import { accountType, configlist, mine } from "../../config/api";
	import { onShow } from '@dcloudio/uni-app'
	import { prefixURL, setCache } from "../../util/util";
	type TypeData = {
		[prop : string] : String | Number | Function | Boolean
	}
	type TypeUser = {
		avatar : String,
		createtime : String,
		expires_in : Number,
		expiretime : String,
		id : Number | String,
		mobile : String,
		nickname : String,
		user_id : String,
		username : String,
	}
	type TypeConfig = {
		yingfu_group : {
			gaosu : String | null,
			shuipiao : String | null,
			jiayou : String | null,
		},
		// [prop : string] : String | Number | Function | Boolean
	}
	const data = ref<TypeData>({
		title: '',
		show: false,
		content: computed(() => {
			if (data.value.title == 'cache') return '确定要清除缓存吗？'
			else return '确定要更新版本至V1.01吗？'
		}),
		currentSize: 0
	});
	const userInfo = ref<TypeUser>({})
	const userConfig = ref<TypeConfig>({})
	onShow(() => {
		uni.hideTabBar()
		_mine()
		_configlist()
		getCacheSize()
	})
	const handleClick = (page)=>{
		uni.switchTab({
			url:page
		})
	}
	const loginOut = () => {
		uni.showModal({
			content: '确定要退出登录吗?',
			success: (res) => {
				if (res.confirm) {
					uni.clearStorage()
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}
			}
		})
	}
	const getCacheSize = () => {
		uni.getStorageInfo({
			success: (res) => {
				data.value.currentSize = (res.currentSize / 1024).toFixed(2)
			}
		});
	}
	const handleConfirm = () => {
		if (data.value.title == 'cache') {
			uni.clearStorage()
			data.value.show = false
		} else {

		}
	}
	// 车辆列表
	// 系统配置
	const _configlist = () => {
		configlist().then(res => {
			console.log(res)
			userConfig.value = res.data
		})
	}
	// 我的
	const _mine = () => {
		mine().then(res => {
			console.log(res)
			userInfo.value = res.data.userinfo
			setCache('userInfo',userInfo.value)
		}).catch(err => {
			console.log(err)
		})
	}
	const handleDialog = (title : string) => {
		data.value.title = title
		console.log(data.value)
		data.value.show = true
	}
	const handleRoute = (page : string) => {
		console.log(page)
		uni.$u.route(page)
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		background: #FAFAFA;
		padding: 0 26rpx;
	}

	.user {
		padding-top: 140rpx;
	}

	.menu {
		border-radius: 12rpx;
		background: #fff;
		padding: 0 40rpx;
	}

	::v-deep .u-cell__body {
		padding: 30rpx 0;
		height: 110rpx;
	}
</style>